<template>
    <div id="tmpl">
        <div v-for="(item,index) in datalist" class="row">
            <mt-switch :value.sync="value" class="switch" v-model="value[index]"></mt-switch>
            <img class="img" :src="item.thumb_path" alt="">
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>&yen;{{item.sell_price}}</li>
                        <li><carinputNum :inputNum='item.cou' :goodsid="item.id" @dataobj="getData"></carinputNum></li>
                        <li> <a href="javascript:;" @click="deleData(item.id,index)">删除</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计(不含运费)</li>
                    <li>已勾选商品{{totalcount}}件 总价:&yen;{{amountPrice}}</li>
                </ul>
            </div>
            <div id="btn">
                <mt-button type="danger" size="small">去结算</mt-button>
            </div>
        </div>
        {{value}}
    </div>
</template>
<script>
    import {
    Toast
  } from 'mint-ui';
    import {getGoodsObj,updateData,removeItem} from '../../kits/local.js';
    import carinputNum from './carinputNUm.vue';
    export default {
        components:{
            carinputNum
        },
        computed:{
            //计算勾选商品数量'
            totalcount(){
                var trueArr=this.value.filter(function(item){return item});
                //计算商品总价
                var amount=0;
                var that=this;
                this.value.forEach(function(item,index){
                    if(item){
                        var count=that.datalist[index].cou;
                        var price=that.datalist[index].sell_price;
                        amount+=count*price;      
                    }
                })
                this.amountPrice=amount;
                return trueArr.length;
            }
        },
        data() {
            return {
                value: [],
                datalist: [
        //             {
        //     "cou": 1,
        //     "id": 87,
        //     "title": "华为（HUAWEI）荣耀6Plus 16G双4G版",
        //     "sell_price": 2195,
        //     "thumb_path": "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046589514.jpg"
        // }
                ],
            amountPrice:0
            }
        },
        created(){
            this.getdatalist();     
        },
        methods: {
            deleData(id,index){
                //删除value中的值
                this.value.splice(index,1);
                //删除datalist中的值
                this.datalist.splice(index,1);
                //删除localStorage中的值
                removeItem(id);
            },
            getData(resObj){
                // console.log(resObj);
                //跟新local中的数据
                updateData(resObj);
                
                //跟新datalist中的数据
                for(var i=0;i<this.datalist.length;i++){
                    var item=this.datalist[i];
                    if(item.id==resObj.goodsid){
                        // item.cou=resObj.goodscount;
                        if(resObj.type=='add'){
                            item.cou+=1;
                            break;
                        }else{
                            item.cou-=1;
                            break;
                        }
                    }
                }
                console.log(this.datalist);
            },
            getdatalist(){
                var that=this;
                var obj=getGoodsObj();
                var idstring='';
                for(var k in obj){
                    idstring+=k+',';
                }
                var ids=idstring.substring(0,idstring.length-1);

                
                var url = 'http://182.254.146.100:8899/api/goods/getshopcarlist/'+ids;
                this.$http.get(url).then(function (res) {
                    var body = res.body;
                    if (body.status != 0) {
                        Toast(body.message);
                        return;
                    }
                    //将local中的所有商品对应的count值赋值给message中的cun
                    body.message.forEach(function(item) {
                        item.cou=obj[item.id];
                        //初始化vaule
                        that.value.push(false);
                    });
                    this.datalist = body.message;
                    console.log(this.datalist)
                })
                
            }
        }
    }
</script>
<style scoped>
    .row {
        border-bottom: 1px solid #000;
        height: 102px;
        display: flex;
    }

    .switch {
        flex: 0 0 52px;
    }

    .img {
        width: 75px;
        width: 75px;
        flex: 0 0 85px;
        margin-top: 10px;
    }

    .inforight {
        margin-left: 5px;
        flex: 1;
    }

    .inforight ul {
        padding-left: 0px;
    }

    .inforight li {
        list-style: none;
        display: inline-block;
    }

    .inforight h4 {
        color: #0094ff;
        font-size: 14px;
    }

    .bottom li:first-child {
        color: red;
        margin-right: 5px;
    }

    .bottom li:last-child {
        margin-left: 10px;
    }
    #total{
        height: 100px;
        background-color: rgba(0, 0, 0, .1);
        display: flex;
    }
    #total ul{
        padding-left: 0px;
    }
    #total li{
        list-style: none;
        font-size: 14px;
    }
    #btn{
        flex: 0 0 60px;
        margin: 30px 0 0 0;
        
    }
    .desc{
        flex: 1;
    }
</style>